<template>
  <Modal :mask-closable="false"
      v-model="helpShowF"
      :title="info.title"
      class="modal-content-item-layout"
      width="1200"
  >
    <div class="content-item pd16">
      <span class="content-item-title">{{$t('注释')}}</span>
      <p class="pd16 item-desc" >
        {{info.titleDesc}}
      </p>
      <ul class="images" v-if="type==2">
        <li><img src="../../../assets/images/product/a.png" alt=""></li>
        <li>x</li>
        <li><img src="../../../assets/images/product/p.png" alt=""></li>
        <li>x</li>
        <li><img src="../../../assets/images/product/q.png" alt=""></li>
        <li>=</li>
        <li><img src="../../../assets/images/product/oee.png" alt=""></li>
      </ul>
      <ul class="images" v-if="type==1">
        <li><img src="../../../assets/images/product/a.png" alt=""></li>
        <li>x</li>
        <li><img src="../../../assets/images/product/p.png" alt=""></li>
        <li>x</li>
        <li><img src="../../../assets/images/product/q.png" alt=""></li>
        <li>x</li>
        <li><img src="../../../assets/images/product/u.png" alt=""></li>
        <li>=</li>
        <li><img src="../../../assets/images/product/nee.png" alt=""></li>
      </ul>
    </div>
    <div class="content-item pd16" v-if="helpShowF">
      <vo-basic :pan="true"  nodeContent="nodeContent" :createNode="createNode" class="orgchartStyle" :class="{enWidthnode: $i18n.locale === 'en_US'}" :data="info.data" :toggleSiblingsResp="false"></vo-basic>
    </div>
    <div slot="footer">
      <Button type="primary"  @click="helpShowF=false">{{$t('maintenance.Confirmed')}}</Button>
    </div>
  </Modal>
</template>

<script>
import { VoBasic } from 'vue-orgchart'
import oeeNeeChartData from './oeeNeeChartData'



export default {
  name: "oeeHelpOrgChart",
  components:{VoBasic},
  data(){
    return {
      helpShowF:false,
      info:{},
      type:1
    }
  },
  methods:{
    show(type){
      this.type = type;
      this.info = oeeNeeChartData[type][this.$i18n.locale === 'zh_CN' ? 'zh':'en']
      this.helpShowF = true
    },
    createNode($node, data){
      const {level }  = data;
      $node.setAttribute('class','node level'+level)
    }
  }
}
</script>

<style scoped lang="scss">
.images{
  margin:0 auto;
  text-align: center;
  padding-bottom: 40px;
  padding-top: 20px;
  li{
    display: inline-block;
    font-weight: bold;
    font-size: 35px;
    color: #00142D;
    margin-right: 50px;
    &:last-child{
      margin-right: 0;
    }
  }
  img{
    width: 120px;
  }
}
</style>
